<template>
	<view class="coupon-list">
		<view class="section">
			<view class="section-title">抽奖券</view>

			<view class="section-items" @click="toggleUserCard">
				<view class="section-items-left">
					<image class="left-imgbg"
						src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/assets_user.png" />
					<view class="left-con left-con-title">
						<view class="name">抽奖券</view>
					</view>
				</view>
				<view class="section-items-right">
					<view class="number">
						<text>x{{userInfo ? userInfo.coupons : 0}} 张</text>
					</view>
					<view class="button">
						<view class="more">
							<text>{{isShowUserCard ? '收起' : '更多'}} ></text>
						</view>
					</view>
				</view>
			</view>

			<view v-if="isShowUserCard">
				<view class="section-items" v-for="item in cardList" :key="item.id">
					<view class="section-items-left">
						<image class="left-imgbg"
							src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/assets_user.png" />
						<view class="left-con">
							<view class="name">{{ item.name }}</view>
							<view class="time">有效日期：{{ item.time }}</view>
						</view>
					</view>
					<view class="section-items-right">
						<view class="button">
							<view class="btn" @click="gotoLottery">
								<text>去使用</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="section" v-if="Number(userInfo.level) === 1">
			<view class="section-title">产品卡</view>

			<view class="" v-for="(item, index) in carIntegraList" :key="index">
				<view class="section-items" @click="showStoreMore(item)">
					<view class="section-items-left">
						<image class="left-imgbg"
							src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/assets_store.png">
						</image>
						<view class="left-con-card">
							<view class="name-title">{{ item.name }}</view>
							<!-- <view class="bottm-box">
							<view class=""> <text>{{ item.account }}</text> 元</view>
							<view class="">有效日期：{{ item.time }}</view>
						</view> -->
						</view>
					</view>
					<view class="section-items-right">
						<view class="number">
							<text>x{{ item.chirendList.length }} 张</text>
						</view>
						<view class="button">
							<view class="more"><text>更多 ></text></view>
						</view>
					</view>
				</view>


				<view class="" v-if="item.isShow">
					<view class="section-items" v-for="(data, idx) in item.chirendList" :key="idx">
						<view class="section-items-left">
							<image class="left-imgbg"
								src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/assets_store.png">
							</image>
							<view class="left-con-card">
								<view class="name">{{ data.name }}</view>
								<view class="bottm-box">
									<view class=""> <text>{{ data.account }}</text> 元</view>
									<view class="">有效日期：{{ data.time }}</view>
								</view>
							</view>
						</view>
						<view class="section-items-right">

							<view class="button">
								<view class="btn"><text>去使用</text></view>
							</view>
						</view>

					</view>

				</view>

			</view>

		</view>

	</view>
</template>

<script lang="ts">
	import { Vue, Component, Prop } from 'vue-property-decorator'
	import { UserInfo } from '@/moduleC/types/user'

	interface CouponItem {
		id: string
		name: string
		time: string
	}

	interface carIntegraList {
		id: string | number
		name: string
		chirendList: Array<{
			name: string
			account: number | string
			time: string
		}>
		isShow?: boolean
	}

	@Component
	export default class CouponList extends Vue {
		@Prop({ required: true }) userInfo!: UserInfo | null
		@Prop({ required: true }) cardList!: CouponItem[]
		@Prop({ required: true }) carIntegraList!: carIntegraList[]
		

		private isShowUserCard = false

		get hasUserInfo() : boolean {
			return this.userInfo !== null
		}
		
		showStoreMore(data: carIntegraList) {
			data.isShow = !data.isShow
		}
		
		toggleUserCard() {
			this.isShowUserCard = !this.isShowUserCard

			console.log(this.userInfo)
		}

		gotoLottery() {
			uni.navigateTo({
				url: '/moduleA/lottery/index'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-list {
		
		.section {
			margin: 0 30rpx;
			margin-top: 40rpx;
			// padding: 16px 12px;
			// background: #fff;
			// border-radius: 12px;
			// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
		
			&+.section {
				margin-top: 12px;
			}
		
			.section-title {
				font-size: 34rpx;
				font-weight: 500;
				color: #000000;
				position: relative;
				z-index: 4;
		
				&::before {
					content: '';
					position: absolute;
					z-index: -1;
					left: 0;
					bottom: 0;
					// transform: translateY(-50%);
					width: 60px;
					height: 7px;
					background: linear-gradient(98deg, #3ac29b 7%, rgba(110, 229, 204, 0.00) 95%);
				}
			}
		
			.section-items {
				margin-top: 30rpx;
				display: flex;
		
				.section-items-left {
					width: 196px;
					height: 50px;
					position: relative;
		
					.left-imgbg {
						width: 196px;
						height: 100%;
					}
		
					.left-con-card {
						position: absolute;
						top: 5px;
						left: 12px;
						width: 172px;
						height: 40px;
		
						.name {
							font-size: 16rpx;
							font-weight: 500;
							color: #ffffff;
							margin-top: 2px;
						}
						.name-title{
							width: 100%;
							height: 100%;
							color: #fff;
							font-size: 28rpx;
							line-height: 78rpx;
							text-align: center;
						}
						
						.bottm-box {
							display: flex;
							justify-content: space-between;
							font-size: 16rpx;
							font-weight: 500;
							color: #ffffff;
							align-items: flex-end;
							margin-top: 10px;
		
							text {
								font-size: 15px;
		
							}
						}
					}
					
					.left-con {
						position: absolute;
						top: 5px;
						left: 12px;
						width: 172px;
						height: 80rpx;
						border: 1px solid #2aa482;
						border-radius: 4px;
						&.left-con-title{
							.name{
								height: 100%;
								line-height: 74rpx;
							}
						}
						.name {
							font-size: 15px;
							font-weight: 700;
							text-align: left;
							color: #ffffff;
							text-shadow: 0px 2px 0px 0px #339881;
							text-align: center;
						}
		
						.time {
							font-size: 16rpx;
							font-weight: 700;
							text-align: left;
							color: #ffffff;
							text-align: center;
							margin-top: 4px;
						}
					}
				}
		
				.section-items-right {
					flex: 1;
		
					.number {
						text-align: right;
						font-size: 14px;
						font-weight: 500;
						color: #000000;
					}
		
					.button {
						margin-top: 10px;
						.more{
							margin-left: auto;
							width: 100%;
							height: 20px;
							border-radius: 10px;
							font-size: 22rpx;
							font-weight: 400;
							text-align: right;
							color: #43d534;
							display: flex;
									
							text {
								flex: 1;
							}
						}
						.btn {
							margin-left: auto;
							width: 54px;
							height: 20px;
							background: #43d534;
							border-radius: 10px;
							font-size: 10px;
							font-weight: 400;
							text-align: left;
							color: #ffffff;
							display: flex;
							align-items: center;
							justify-items: center;
							text-align: center;
		
							text {
								flex: 1;
							}
						}
					}
				}
			}
		
		}
		
		
		.list-bottom {
			text-align: center;
			padding: 16px;
			color: #999;
			font-size: 12px;
		}
	}
</style>